<template>
  <div class="dashboard-container">
    <div class="adminContent">
      <!--      <div class="title">考勤管理</div>-->
      <div class="butList">
        审批列表
<!--        <div  @click="addHander('add')" style="display: inline-block"><span>+</span> 新增考勤组</div>-->
      </div>
      <div class="cont">
        <div class="tableCont">
          <el-table ref="multipleTable" :data="tableData" style="width: 100%">
            <el-table-column align="center" label="审批编号">
              <template slot-scope="scope">{{ scope.row.approveInst.instNo }}</template>
            </el-table-column>
            <el-table-column align="center" label="标题">
              <template slot-scope="scope">{{ scope.row.approveInst.definitionName }}</template>
            </el-table-column>
            <el-table-column align="center" label="发起时间">
              <template slot-scope="scope">{{ moment(Number(scope.row.approveInst.applyTime)).format('YYYY-MM-DD HH:mm:ss') }}</template>
            </el-table-column>
            <el-table-column align="center" label="完成时间">
              <template slot-scope="scope">{{ moment(Number(scope.row.approveInst.endNodeEndTime)).format('YYYY-MM-DD HH:mm:ss') }}</template>
            </el-table-column>
            <el-table-column align="center" label="当前审批人" prop="currNodeUserNames" >
              <template slot-scope="scope">{{scope.row.approveInst.currNodeUserNames}}</template>
            </el-table-column>
            <el-table-column align="center" label="历史审批人" prop="hisUserNames" >
              <template slot-scope="scope">{{scope.row.approveInst.hisUserNames}}</template>
            </el-table-column>
            <el-table-column width="120" prop="address" center label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <span class="actLab" style="color: #999;" @click="editerHander(scope.row.approveInst)">转交</span>
                <span class="actLab" style="color: #999;" @click="delHander(scope.row).approveInst">删除</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageList">
            <el-pagination
              layout="prev, pager, next"
              @current-change="handlePageChange"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
      <!--      // 删除-->
      <el-dialog title="确认删除" :visible.sync="qurenDel" width="30%" center>
        <div style="text-align: center">
          <p><i class="icon" style="color:#f48181;font-size: 40px;margin: 10px;">&#xe685;</i></p>
          <p>确认后该信息将被删除，</p>
          <p>并不可恢复，是否确认删除？</p>
        </div>
        <div class="submitBox">
          <el-button size="mini" style="color:#3345ff;" @click="qurenDel = false">取 消</el-button>
          <el-button size="mini" class="submit" type="primary" @click="confirmDel">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import Cascader from './../../components/Cascader'
    export default {
        name: 'Dashboard',
        data() {
            return {
                qurenDel:false,
                delId: '',
                dialogVisible:false,
                loading:false,
                title: '添加考勤组',
                tableData: [],
                active: '添加',
                total: 0,
                page: 1,
                pageSize: 8,
                mustCardsDate: '',
                mustCardsDateSt: false,
                mustCardsDateItem: [],
                nonCardsDate: '',
                nonCardsDateSt: false,
                nonCardsDateItem: [],
                value:'',
                options: [],
                adminListData: [],
                memberList: [],
                checkList:[],
                checkListes: [],
                cardsDate:'',
                noCardsDate:'',
                startWorkTime: '',
                offWorkTime: '',
                chgCardsDateNum: '',
                formDataInit: {
                    name: '',
                    participates:[],
                    notParticipates:[],
                    managerId:'',
                    managerType: '1',
                    startWorkTime: '',
                    offWorkTime: '',
                    allowLateMinutes: '',
                    completionLimitMinutes: '',
                    workdays: [],
                    extraConfig: '',
                    lat: '',
                    lng: '',
                    range: 300,
                    addressName: '',
                    address: '',
                    id: ''
                },
                ruleForm: {},
                zoom: 10,
                markers: [],
                searchOption: {
                    city: '北京',
                    citylimit: false
                },
                mapCenter:  [116.39, 39.9],
                plugin: [{pName: 'ToolBar' }],
                poit: [],
                mapOpen: false,
                mapName: '',
                mapAddress: '',
                mapAdderssItems: [],
            }
        },
        computed: {
            ...mapGetters([
                'name'
            ]),
        },
        components:{
            Cascader
        },
        created(){
            this.init()
            this.getMemberList()
            this.ruleForm = this.formDataInit
        },
        methods: {
            init(){
                this.$store.dispatch('approval/getApprovalListAct', {page:this.page,pageSize:this.pageSize}).then((res) => {
                    this.tableData = res.list
                    console.log(3333, res)
                    this.total = Number(res.total)
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            getAdminList(){
                this.$store.dispatch('company/getCompanyAdminListAct').then((res) => {
                    this.adminListData = res
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            getMemberList(){
                this.$store.dispatch('organization/getSimMemberAct', {pageSize:1000,includeSub: 0}).then((res) => {
                    this.memberList = res.rows
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            getValue(val){
                this.ruleForm.participates = val.map(n => {
                    return {objectId: n.id, objectType: n.type}
                })
            },
            getValueUn(val){
                this.ruleForm.notParticipates = val.map(n => {
                    return {objectId: n.id, objectType: n.type}
                })
            },
            // 特殊日期处理
            workTimeSet(st, tg, dat){
                if (tg == 'must'){
                    this.nonCardsDateSt = false
                    if (st == 'add') {
                        this.mustCardsDateSt = true
                        this.active = '添加'
                        this.mustCardsDate = ''
                    } else if (st == 'edit'){
                        this.mustCardsDateSt = true
                        this.active = '修改'
                        this.mustCardsDate = dat
                        this.chgCardsDateNum = this.mustCardsDateItem.indexOf(dat)
                    } else if (st == 'del'){
                        const num = this.mustCardsDateItem.indexOf(dat)
                        this.mustCardsDateItem.splice(num,1)
                    }
                }else if (tg == 'non') {
                    this.mustCardsDateSt = false
                    if (st == 'add') {
                        this.nonCardsDateSt = true
                        this.active = '添加'
                        this.nonCardsDate = ''
                    } else if (st == 'edit'){
                        this.nonCardsDateSt = true
                        this.active = '修改'
                        this.nonCardsDate = dat
                        this.chgCardsDateNum = this.nonCardsDateItem.indexOf(dat)
                    } else if (st == 'del'){
                        const num = this.nonCardsDateItem.indexOf(dat)
                        this.nonCardsDateItem.splice(num,1)
                    }
                }
            },
            // 添加特殊日期
            addWorkDate(st){
                if (st == 'must') {
                    if (!this.mustCardsDate) {
                        this.$message.error('请先选择日期！')
                        return false
                    }
                    if (this.active == '修改'){
                        this.mustCardsDateItem.splice(this.chgCardsDateNum, 1, this.mustCardsDate)
                    }else{
                        this.mustCardsDateItem.push(this.mustCardsDate)
                        this.mustCardsDateSt = false
                    }
                } else {
                    if (!this.nonCardsDate) {
                        this.$message.error('请先选择日期！')
                        return false
                    }
                    if (this.active == '修改'){
                        this.nonCardsDateItem.splice(this.chgCardsDateNum, 1, this.mustCardsDate)
                    }else{
                        this.nonCardsDateItem.push(this.mustCardsDate)
                        this.nonCardsDateSt = false
                    }
                }
            },
            addHander(){
                return false
                this.title='添加考勤组'
                this.ruleForm = this.formDataInit
                this.dialogVisible = true
            },
            // 编辑考勤组
            editerHander(row){
                return false
                this.$store.dispatch('attendance/getAttendGroupInfoAct',{id: row.id}).then((res) => {
                    this.ruleForm = res
                    this.startWorkTime = res.allowLateMinutes ? true : false
                    this.offWorkTime = res.completionLimitMinutes ? true : false
                    let workArr = []
                    res.workdays.forEach((n, i) => {
                        if (n == 1) {
                            workArr.push(String(i+1))
                        }
                    })
                    this.ruleForm.workdays = workArr
                    res.extraConfig.forEach(n => {
                        if (n.requiredAttend == 1){
                            this.mustCardsDateItem.push(n.setDate)
                        } else if (n.requiredAttend == 0){
                            this.nonCardsDateItem.push(n.setDate)
                        }
                    })
                    if(res.address){
                        this.mapAdderssItems = [{address: res.address, addressName: res.addressName}]
                    }
                    this.title='编辑考勤组'
                    this.dialogVisible = true
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            // 删除
            delHander(row){
                this.delId = row.id
                this.qurenDel = true
            },
            confirmDel() {
                this.$store.dispatch('attendance/delAttendGroupInfoAct',{id:row.id}).then((res) => {
                    this.qurenDel = false
                    this.$message.success('删除成功！')
                    this.init()
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            // 分页
            handlePageChange(val) {
                this.page = val
                this.init()
            },
            // 提交
            submitSetAdmin(){
                let params = {...this.ruleForm}
                params.workdays = this.workDaysComplate(params.workdays)
                params.extraConfig = this.extraConfigComplate()
                if (!params.name.trim()){
                    this.$message.error('请输入考勤组名称！')
                    return false
                }
                if (!params.managerId){
                    this.$message.error('请选择考勤组负责人！')
                    return false
                }
                if (!params.startWorkTime || !params.offWorkTime){
                    this.$message.error('请设置上下班时间！')
                    return false
                }
                if (!params.rules.trim()){
                    this.$message.error('请添写考勤范围！')
                    return false
                }
                if (!params.address.trim()){
                    this.$message.error('请添加考勤地点！')
                    return false
                }
                console.log(params)
                const url = this.title = '添加考勤组' ? 'attendance/addAttendGroupAct' : 'attendance/putAttendGroupInfoAct'
                this.$store.dispatch(url, {...params}).then((res) => {
                    this.$message.success('数据提交成功！')
                    this.dialogVisible = false
                    this.adminListData = res
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            addMarker(obj) {
                this.mapName = obj.name
                this.mapAddress = obj.address
                this.poit = obj.position
            },
            // 打开考勤地图
            mapOpenHander(){
                if(this.mapAdderssItems.length == 0){
                    this.mapOpen = true
                    this.mapName = ''
                    this.markers = []
                    this.mapAddress = '请选择地点'
                } else {
                    this.$message.error('已存在考勤地点，请删除后再添加')
                }
            },
            // 地图搜索
            onSearchResult(pois) {
                let latSum = 0;
                let lngSum = 0;
                if (pois.length > 0) {
                    pois.forEach(poi => {
                        let {lng, lat} = poi;
                        lngSum += lng;
                        latSum += lat;
                        this.markers.push({position:[poi.lng, poi.lat],name:poi.name,address:poi.address});
                    });
                    let center = {
                        lng: lngSum / pois.length,
                        lat: latSum / pois.length
                    };
                    this.mapCenter = [center.lng, center.lat];
                }else{
                    this.markers = []
                }
            },
            // 地理位置确定
            mapInfoHander(){
                if (!this.mapName) {
                    this.$message.error('请输入名称！')
                    return false
                }
                this.mapAdderssItems.push({addressName:this.mapName, address:this.mapAddress})
                this.ruleForm.addressName = this.mapName
                this.ruleForm.address = this.mapAddress
                this.ruleForm.lat = this.poit[0]
                this.ruleForm.lng = this.poit[1]
                this.mapOpen = false;
                this.addressName = ''
                this.address = ''
                this.markers = []
                console.log()
            },
            // 地理位置删除
            delMapInfoHander(){
                this.mapAdderssItems = []
            },
            // 数据处理函数
            // 工作日数据处理
            workdays(val,st){
                let lat = []
                val.forEach((n, i) => {
                    if(n == st){
                        switch (i) {
                            case 0 :
                                lat.push('一')
                                break
                            case 1 :
                                lat.push('二')
                                break
                            case 2 :
                                lat.push('三')
                                break
                            case 3 :
                                lat.push('四')
                                break
                            case 4 :
                                lat.push('五')
                                break
                            case 5 :
                                lat.push('六')
                                break
                            case 6 :
                                lat.push('日')
                                break
                        }
                    }
                })
                return lat.join('、')
            },
            // workDays 数据处理
            workDaysComplate(obj){
                let workArr = []
                for (let i = 1; i <= 7; i++){
                    if (obj.indexOf(String(i)) != -1){
                        workArr.push(1)
                    }else{
                        workArr.push(0)
                    }
                }
                return workArr
            },
            // 特殊日期数据处理
            extraConfigComplate(){
                let arr = []
                this.mustCardsDateItem.forEach(n => {
                    let dat = {setDate: n, requiredAttend: 1}
                    arr.push(dat)
                })
                this.nonCardsDateItem.forEach(n => {
                    let dat = {setDate: n, requiredAttend: 0}
                    arr.push(dat)
                })
                return arr
            }

        }
    }
</script>
<style lang="scss">
  .adminContent {
    .el-table thead th, .el-table thead tr {
      background: #edeffd;
    }

    .pageList {
      text-align: right;
      padding: 10px 0;
      .el-pager li {
        margin: 0 5px;
        min-width: 28px;
        width: 28px;
      }

      .active {
        background: #3345ff;
        border-radius: 100%;
        color: #fff;
      }
    }

    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background: #3345ff;
      border-color: #3345ff;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label{
      color:#606266;
    }
    .search-tips{
      min-width: 200px;
      box-shadow: 0 0 4px #ccc;
      border:none !important;
      margin-top: 4px;
      li{
        border:none;
      }
    }
  }
</style>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      .adminContent {
        .title {
          text-align: center;
          padding: 0 15px;
          line-height: 40px;
          background: #eceffc;
        }
        .butList{
          padding: 0 20px;
          cursor: pointer;
          /*color: #3345ff;*/
          font-size: 16px;
          line-height: 50px;
          span{
            display: inline-block;
            position: relative;
            top:-1px;
            text-align: center;
            font-weight: bold;
            margin-right: 2px;
            color:#fff;
            background: #3345ff;
            line-height: 12px;
            height: 14px;
            width: 14px;
            border-radius: 100%;
          }
        }
        .cont {
          padding:0 20px;
          .tableCont{
            background: #fff;
            p{
              margin: 0px;
            }
          }
          .titlab{
            margin: 0 4px;
            font-size: 12px;
            border-radius: 4px;
            padding: 4px 10px;
          }
          .actLab{
            color:#3345ff;
            margin: 0 4px;
            cursor: pointer;
          }
        }
        .itemsLIst{
          display: flex;
          flex-wrap: wrap;
          line-height: 40px;
          .items{
            width: calc(50% - 5px);
            display: flex;
            justify-content: space-between;
            box-shadow: 2px 2px 10px #e6e6e6;
            margin: 5px 0;
            border-radius: 5px;
            padding: 10px 15px;
            .lab{
              display: inline-block;
              text-align: center;
              width: 40px;
              height: 40px;
              color:#fff;
              border-radius: 100px;
              font-size: 22px;
              margin-right: 10px;
            }
          }
          .items:nth-child(2n-1){
            margin-right: 10px;
          }
        }
        .tit{
          line-height: 50px;
        }
        .dialog-footer{
          display: flex;
          justify-content: center;
          text-align: center;
          margin-top: 30px;
        }
        .miniInput {
          width: 50px;
          line-height: 17px;
          border-radius: 3px;
          font-size: 12px;
          border: solid 1px #ccc;
          padding: 3px 4px;
        }
        .addLab{
          background: #3345ff;
          color:#fff;
          padding: 4px 10px;
          border-radius: 3px;
          font-size: 12px;
          cursor: pointer;
        }
        .table{
          width: 400px;
          border-radius: 3px;
          box-shadow: 0px 0px 4px #ccc;
          .tbHead{
            background: #eceffc;
            display: flex;
            text-align: center;
            div{
              flex: 1;
            }
          }
          .tbTr{
            display: flex;
            text-align: center;
            div{
              flex: 1;
            }
            .act{
              cursor: pointer;
              color:#3345ff;
            }
          }
        }
        .address{
          color: #3345ff;
          cursor: pointer;
          margin-right: 10px;
        }
        .map{
          background: #fff;
          box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
          margin-bottom: 20px;
          position: relative;
          .amap {
            height: 300px;
            border-radius: 3px;
          }
          .search-box {
            position: absolute;
            top: 25px;
            right: 20px;
            width: 200px;
            height: 35px;
            border-radius: 3px;
            box-shadow: 0 0 4px #ccc;
          }
          .markerLab{
            display: inline-block;
            text-align: center;
            .icon{
              color: #ff0000;
              font-size: 32px;
              text-shadow: 0 0 4px #ccc;
            }
          }
          .amap-page-container {
            position: relative;
          }
          .mapFoot{
            padding: 15px;
            display: flex;
            justify-content: space-between;
            input{
              border-radius: 3px;
              border: solid 1px #e8e9ea;
              padding: 2px 5px;
            }
            .botItem{
              display: flex;
              align-items: center;
            }
            .cancelSub, .confirmSub{
              border:solid 1px #3345ff;
              color: #3345ff;
              border-radius: 3px;
              cursor: pointer;
              margin: 10px;
              padding: 4px 10px;
            }
            .confirmSub{
              color: #fff;
              background: #3345ff;
            }
          }
        }
        .submitBox {
          display: flex;
          justify-content: center;
          margin-top: 20px;

          .submit {
            background: #3345ff;
            border-color: #3345ff;
          }
        }
        .addressItems{
          box-shadow: 0px 0px 4px #ccc;
          border-radius: 3px;
          line-height: 25px;
          width: 400px;
          margin-left: 142px;
          .icon{
            color:#f00;
          }
          .addTit {
            border-bottom: solid 1px #ccc;
            padding:10px 15px;
          }
          .addItems{
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            p{
              margin: 0;
              padding: 0;
              .icon{
                font-size: 14px;
              }
            }
            .del{
              text-align: right;
              display: flex;
              align-items: center;
              color: #3345ff;
            }
          }
          .addDes{
            color:#999;
          }
        }
      }
    }
  }
</style>
